<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="xmy6364">
    <meta name="description" content="想要成为大佬">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/github-gist.min.css">
    <link rel="stylesheet" href="/assets/lib/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/layout.css" />
    <script defer src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script defer src="/assets/js/copyCode.js"></script>
    <script defer src="/assets/js/backTop.js"></script>
    <script defer src="/assets/js/tool.js"></script>

    
  <link rel="stylesheet" href="/assets/css/page.css" />
  <link rel="stylesheet" href="/assets/css/sidebar.css" />
  <link rel="stylesheet" href="/assets/css/footer.css" />
  <link rel="stylesheet" href="/assets/css/post.css" />
  <script defer src="/assets/js/backHome.js"></script>
  <script defer src="/assets/js/toc.js"></script>
  <script defer src="/assets/js/copyright.js"></script>


    <title>Electron踩坑记录</title>
  </head>
  <body>
    <div class="container">
      <aside>
        
  <div class="sidebar">
  <header>梦的博客</header>
  <div class="info">
    <div class="avatar">
      <img src="https://cdn.jsdelivr.net/gh/xmy6364/blog-image/img/pixelartoc_1.png" alt="头像">
    </div>
    <div class="author">xmy6364</div>
    <div class="description">想要成为大佬</div>
    <div class="about">
      <a href="/about">about me.</a>
    </div>
  </div>
  <div class="links">
    <ul>
    
      <li class="links-item">
        <a href="https://github.com/xmy6364" target="_blank">
          <i class="fa fa-github-alt" aria-hidden="true"></i>
        </a>
      </li>
    
      <li class="links-item">
        <a href="tencent://message/?uin=1176281967" target="_blank">
          <i class="fa fa-qq" aria-hidden="true"></i>
        </a>
      </li>
    
    </ul>
  </div>
  <nav>
    <ul>
    
      <li class="nav-item">
        <a href="/archives">
          <span class="nav-item__count">33</span>
          <span class="nav-item__label">归档</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/categories">
          <span class="nav-item__count">2</span>
          <span class="nav-item__label">分类</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/tags">
          <span class="nav-item__count">45</span>
          <span class="nav-item__label">标签</span>
        </a>
      </li>
    
    </ul>
  </nav>
  <div class="catalogue" id="catalogue"></div>
</div>

      </aside>
      <main>
        
  <div class="post">
    <div class="post-front">
      <h1 class="post-front__title">Electron踩坑记录</h1>
      <div class="post-front__desc">
        
        <p class="post-front__desc-date">
          <i class="fa fa-calendar" aria-hidden="true"></i>
          2020/10/21 10:00:47
        </p>
        
        
        <p class="post-front__desc-category">
          <i class="fa fa-folder-o" aria-hidden="true"></i>
          <a href="/categories/技术">
            技术
          </a>
        </p>
        
          <div class="post-front__desc-tags">
          
          <a href="/tags/JavaScript">
            <i class="fa fa-tag" aria-hidden="true"></i>
            JavaScript
          </a>
          
          <a href="/tags/Electron">
            <i class="fa fa-tag" aria-hidden="true"></i>
            Electron
          </a>
          
          <a href="/tags/NodeJs">
            <i class="fa fa-tag" aria-hidden="true"></i>
            NodeJs
          </a>
          
        </div>
      </div>
    </div>
    <div class="post-content">
      <nav id="toc" class="toc"><ol><li><a href="#安装">安装</a></li><li><a href="#c包rebuild">C++包rebuild</a><ol><li><a href="#手动rebuild">手动rebuild</a></li><li><a href="#使用electron-rebuild">使用electron-rebuild</a></li></ol></li><li><a href="#打包">打包</a></li><li><a href="#白屏问题">白屏问题</a><ol><li><a href="#简单解决">简单解决</a></li><li><a href="#使用占位图">使用占位图</a></li></ol></li></ol></nav><p>心血来潮想做一个PC端应用，就来学学Electron，以下为学习Electron时的踩坑记录。</p>
<h2 id="安装">安装</h2>
<p>在国内安装<code>electron</code>的时候，可能会因为网络原因遇到卡在<code>Building fresh packages...</code>（yarn）或者是卡在<code>node install.js</code>（npm）这一步上。</p>
<p>在项目的根目录下创建<code>.yarnrc</code>或<code>.npmrc</code>然后输入如下内容更改各依赖的源，即可解决该问题。</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622202173412">复制</button>registry &quot;https://registry.npm.taobao.org&quot;

sass_binary_site &quot;https://npm.taobao.org/mirrors/node-sass/&quot;
phantomjs_cdnurl &quot;http://cnpmjs.org/downloads&quot;
electron_mirror &quot;https://npm.taobao.org/mirrors/electron/&quot;
sqlite3_binary_host_mirror &quot;https://foxgis.oss-cn-shanghai.aliyuncs.com/&quot;
profiler_binary_host_mirror &quot;https://npm.taobao.org/mirrors/node-inspector/&quot;
chromedriver_cdnurl &quot;https://cdn.npm.taobao.org/dist/chromedriver&quot;
</code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622202173412">registry "https://registry.npm.taobao.org"

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"
</textarea>
<h2 id="c包rebuild">C++包rebuild</h2>
<p>使用electron就避不开要使用一些第三方的C++包，使用这些包的时候需要根据node和electron的版本重新编译。</p>
<h3 id="手动rebuild">手动rebuild</h3>
<p>手动编译要根据electron的版本设置target，然后再根据node的版本设置对应的abi值，（详见<a href="https://github.com/mapbox/node-pre-gyp/blob/master/lib/util/abi_crosswalk.json">对应表</a>）</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622196340714">复制</button>$ npm rebuild --runtime=electron --target=6.0.12 --disturl=https://atom.io/download/atom-shell --abi=72
<b class="name">bash</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622196340714">$ npm rebuild --runtime=electron --target=6.0.12 --disturl=https://atom.io/download/atom-shell --abi=72
</textarea>
<h3 id="使用electron-rebuild">使用electron-rebuild</h3>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622199149429">复制</button>yarn add electron-rebuild -D <span class="hljs-comment"># or npm install electron-rebuild --save-dev</span>
<b class="name">bash</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622199149429">yarn add electron-rebuild -D # or npm install electron-rebuild --save-dev
</textarea>
<p>下载后使用<code>npx electron-rebuild</code>即可重新编译，有时候会因为网络原因构建时下载依赖失败，因此可以通过<code>-d=http://npm.taobao.org/mirrors/atom-shell</code>切换为淘宝镜像（好久没更新了）</p>
<blockquote>
<p><strong>注意</strong>：Windows环境下安装electron-rebuild需要先安装<code>windows-build-tools</code></p>
</blockquote>
<h2 id="打包">打包</h2>
<p>electron常用的打包工具有两个<code>electron-builder</code>和<code>electron-forge</code>，我使用的是社区活跃度较高的<code>electron-builder</code>，electron打包时会下载一些必要的依赖，因此和安装依赖、rebuild具有同样的问题——网络问题，因此需要更改下载地址，从淘宝镜像下载</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622197307251">复制</button>ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
</code><span aria-hidden="true" class="line-numbers-rows"><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622197307251">ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
</textarea>
<p>不过我改完镜像打包依然是显示网络超时，因此我选择了手动添加nsis和winCodeSign</p>
<p>从淘宝镜像中分别下载所需要版本的nsis和winCodeSign，解压后将nsis的整个文件夹放到<code>C:\Users\admin\AppData\Local\electron-builder\Cache\nsis</code>中，将winCodeSign的整个文件夹放到<code>C:\Users\admin\AppData\Local\electron-builder\Cache\winCodeSign</code>中，即可成功打包。</p>
<h2 id="白屏问题">白屏问题</h2>
<h3 id="简单解决">简单解决</h3>
<ul>
<li>在ready-to-show的时候再显示</li>
<li>设置窗口底色</li>
</ul>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622196559800">复制</button>win = <span class="hljs-keyword">new</span> BrowerWindow({
    <span class="hljs-attr">width</span>: <span class="hljs-number">600</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">300</span>,
    <span class="hljs-attr">webPreferences</span>: {
        <span class="hljs-attr">nodeIntegration</span>: <span class="hljs-literal">true</span>
    },
    <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
    <span class="hljs-attr">background</span>: <span class="hljs-string">&#x27;#2e2c29&#x27;</span>,
});

win.on(<span class="hljs-string">&#x27;ready-to-show&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
    win.show();
});
<b class="name">js</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622196559800">win = new BrowerWindow({
    width: 600,
    height: 300,
    webPreferences: {
        nodeIntegration: true
    },
    show: false,
    background: '#2e2c29',
});

win.on('ready-to-show', () => {
    win.show();
});
</textarea>
<h3 id="使用占位图">使用占位图</h3>
<ul>
<li><a href="https://github.com/dengyaolong/electron-loading-window-example">https://github.com/dengyaolong/electron-loading-window-example</a></li>
</ul>

    </div>
    
  </div>

        <footer>
        
  <div class="footer">
  
  <div class="theme">
    博客主题为 <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a> 默认主题
  </div>
  <div class="copyright">
    <span>© 2019-2021 xmy6364.</span>
    <span>Powered by <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a></span>
  </div>
</div>

        </footer>
      </main>
    </div>
  </body>
</html>
